import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:test_drive/components/todo/todo_list.dart';
import 'package:test_drive/views/todo/detail_page.dart';

class ListPage extends StatelessWidget {
  const ListPage({Key? key}) : super(key: key);

  /// 类似React class组件的Render
  @override
  Widget build(BuildContext context) {
    TodoList todoList = Provider.of(context);

    // Material组件，页面的骨架
    return Scaffold(
      // 页面的导航栏
      appBar: AppBar(
        title: const Text('Todo List'),
        // 用于隐藏左侧的返回按钮
        leading: Container(),
      ),
      // 页面上浮动的按钮
      floatingActionButton: FloatingActionButton(
        // 按钮展示的icon
        child: const Icon(Icons.add),
        // 点击事件
        // 跳转至新增todo页
        onPressed: () => Navigator.of(context).pushNamed('/edit'),
      ),
      // 页面主题的列表
      body: ListView.builder(
          // 列表包含的列表项总数量
          itemCount: todoList.list.length,
          // 具体列表项组件
          itemBuilder: (context, index) {
            var v = todoList.list.values.toList()[index];
            // 官方卡片组件
            return Card(
              // 官方手势组件
              child: Dismissible(
                key: Key(v.id),
                // 官方列表项组件
                child: ListTile(
                  title: Row(
                    children: [
                      Icon(
                        v.complete ? Icons.check_circle : Icons.access_time,
                        color: v.complete ? Colors.green : Colors.red,
                      ),
                      // todo 完成状态
                      Container(
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: v.complete
                              ? const Text('已完成',
                                  style: TextStyle(color: Colors.white))
                              : const Text(
                                  '未完成',
                                  style: TextStyle(color: Colors.white),
                                ),
                        ),
                        decoration: const BoxDecoration(
                          color: Colors.blue,
                          borderRadius: BorderRadius.all(Radius.circular(5)),
                        ),
                        margin: const EdgeInsets.only(right: 10, left: 10),
                      ),
                      // todo任务
                      SizedBox(
                        width: 200,
                        child: Text(
                          v.task,
                          overflow: TextOverflow.ellipsis,
                          maxLines: 1,
                        ),
                      ),
                    ],
                  ),
                  // 详情按钮
                  trailing: IconButton(
                    onPressed: () => {
                      Navigator.of(context).push(MaterialPageRoute(
                        builder: (context) => DetailPage(
                          false,
                          currentId: v.id,
                        ),
                      ))
                    },
                    icon: const Icon(Icons.keyboard_arrow_right),
                  ),
                  // 点击回调， todo状态切换
                  onTap: () {
                    todoList.statusChange(v);
                  },
                ),
                // 划动回调，用于删除todo
                onDismissed: (direction) {
                  ScaffoldMessenger.of(context)
                      .showSnackBar(SnackBar(content: Text('删除了任务 ${v.task}')));
                  todoList.remove(v.id);
                },
                // 左右划动展示删除icon
                background: Container(
                  color: Colors.red,
                  child: const ListTile(
                    leading: Icon(
                      Icons.delete,
                      color: Colors.white,
                    ),
                    trailing: Icon(
                      Icons.delete,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
            );
          }),
    );
  }
}
